<template>
  <el-tabs
    v-model="tabState.activeModuleId"
    type="card"
    @tab-click="tabClick"
  >
    <el-tab-pane label="桌面" :name="0">
      桌面
    </el-tab-pane>
    <el-tab-pane
      v-for="(item, index) in tabState.tabData"
      :key="'tab_' + item.id"
      :label="item.title"
      :name="item.id"
    >
      <template #label>
        <span>{{item.title}} &nbsp; &nbsp;
          <i class="el-icon-error" @click.stop="tabRemove(item.id, index)" ></i>
        </span>
      </template>
      <component
        :is="componentKind[item.componentKind]"
        :moduleId="item.id"
      >
      </component>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { defineProps, watch } from 'vue'
// 组件字典
import componentKind from './controller/component.js'
// 状态
// eslint-disable-next-line import/no-absolute-path
import VueDS from '/nf-state'

/**
 * tab标签的管理类
 */
const tabManage = (tabState) => {
  // 绑定 tab 的数据
  const tabData = tabState.tabData // tab的数据

  watch(() => tabState.activeModuleId, (moduleId) => {
    console.log('监听的 moduleId ', moduleId)
    // if (Object.keys(moduleId).length === 0) return

    // 判断是否已经生成标签
    if (tabData.findIndex((item) => item.id === moduleId) === -1) {
      // 没有标签，创建新标签
      const m = tabState.menu.filter(a => a.id === moduleId)[0]
      if (typeof m !== 'undefined') {
        tabData.push({
          id: moduleId, // 模块ID
          componentKind: m.componentKind, // 组件字典类型
          title: m.title // 标签
        })
      }
    }
  },
  { immediate: true })

  // 删除 tab
  const tabRemove = (modId, index) => {
    // console.log('tabRemove', modId)
    // 找到要删除 tab 的下标
    // const index = tabData.findIndex((item) => item.id === modId)
    // 判断是不是激活的tab。非激活，直接删除；激活的，删除后找到左面的tab
    if (modId === tabState.activeName) {
      if (tabData.length > 1) {
        // 删除激活 tab，激活左侧标签
        tabState.activeName = tabData[index - 1].id
        // 路由跳转
        const currMenu = tabState.menu.filter((a) => a.id === modId)[0]
        push({ name: currMenu.routeName, params: { moduleId: modId } })
      } else {
        // 激活桌面
        tabState.activeName = 0
      }
    }
    tabData.splice(index, 1)
  }

  // 单击tab，切换路由
  const tabClick = (tab) => {
    // console.log('handleClick', tab)
    // console.log('handleClick', tab.props.name)
    const modId = parseInt(tab.props.name)

    // 设置状态
    tabState.trigger = 'tab'
    tabState.activeId = moduleId
  }
  return {
    tabRemove,
    tabClick
  }
}
</script>

<script setup>

// 访问状态
const { get } = VueDS.useStore()
// 注册 tab 的状态
const tabState = get.tabState()

// 使用tab的管理类
const {
  tabRemove, // 删除tab的事件
  tabClick // tab的单击事件，路由导航
} = tabManage(tabState)

</script>
